<template>
    <view class="home-bg">
        <view class="close" @click="close">
            <uv-icon name="close-circle" color="#c33a3a" size="50"></uv-icon>
            离开
        </view>
        <view class="title">
            <view class="title-l">风险双控</view>
            <view class="title-s">“隐患点+风险区”双管控精准服务</view>
        </view>
        <view class="home-menu cards">
            <view class="df jsb ac mb-20">
                <view class="box-left">信息总览</view>
                <!-- <view class="right-box" @click="toYinIntro">查看详情</view> -->
            </view>
            <!-- swiper -->
            <view class="home-wrap">
                <view class="menu-flex df jsb">
                    <view
                        v-for="(item, index) in menuData"
                        :key="index"
                        :class="item.class"
                        @click="menuClick(item)"
                    >
                        <image :src="item.src"></image>
                        <view class="menu-name">{{ item.name }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="mt-30">
            <weatherNow></weatherNow>
        </view>
        <view class="mt-30">
            <weatherDailyFcst></weatherDailyFcst>
        </view>
    </view>
    <lh-check-update ref="checkUpdateRef"></lh-check-update>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores'
import weatherNow from '@/pages/components/weatherNow.vue'
import weatherDailyFcst from '@/pages/components/weatherDailyFcst.vue'
const store = useUserStore()
const close = () => {
    store.$reset()
    uni.showToast({
        icon: 'none',
        title: '退出成功',
    })
    uni.reLaunch({
        url: '/pages/login/index', // '/pages/tabbar/home/home-item'
    })
}
const menuData = [
    {
        src: '/static/img/home/zhsb_2.png',
        name: '灾情上报',
        class: 'menu-box linear-3',
        url: '/pages/home/disaster-dcpj',
    },
    {
        src: '/static/img/home/zcfg_2.png',
        name: '宣传培训',
        class: 'menu-box linear-1',
        url: '/pages/home/xcpxIndex',
    },
    {
        src: '/static/img/home/xpdy_2.png',
        name: '资料下载',
        class: 'menu-box linear-4',
        url: '/pages/home/zlxzIndex',
    },
]
const menuClick = (item) => {
    uni.navigateTo({
        url: item.url,
    })
}
const checkUpdateRef = ref()
//更新检查更新方法
const update = () => {
    checkUpdateRef.value?.update()
}
onLoad(() => {
    update()
})
</script>

<style lang="scss" scoped>
.home-bg {
    background-size: 100% 632rpx;
    background-repeat: no-repeat;
    background-image: url('~@/static/img/home/home-bg2.png');
    padding: 30rpx;
    .close {
        position: absolute;
        right: 30rpx;
        color: #c33a3a;
        display: flex;
        align-items: center;
        font-size: 36rpx;
    }
    .title-l {
        color: #ffffff;
        font-size: 50rpx;
        font-weight: bold;
        padding-left: 20rpx;
    }

    .title-s {
        color: #ffffff;
        font-size: 30rpx;
    }
    .home-menu {
        width: 100%;
        background-color: #ffffff;
        margin-top: 100rpx;

        .home-wrap {
            width: 100%;

            .wrap-h {
                height: 350rpx;
            }

            .menu-flex {
                // display: grid;
                // 四列布局
                // grid-template-columns: repeat(3, 1fr); /* 四列等宽布局 */
                // grid-gap: 40rpx; // 两列之间的间距

                .menu-box {
                    display: flex;
                    flex-direction: column;
                    justify-content: center; // X轴剧中
                    align-items: center; // Y轴剧中
                    border-radius: 10rpx;
                    padding: 24rpx 20rpx;

                    image {
                        height: 95rpx;
                        width: 95rpx;
                    }

                    .menu-name {
                        font-size: 28rpx;
                        font-weight: bold;
                        color: #858585;
                    }
                }
            }
        }
    }
}
</style>
